<template>
	<view>
		<!-- 假设我需要状态栏到文字内容部分还有20px的距离 -->

		<view class="myNavigation bgc" :style="{height:height+100+'px'}">
			<view class="user-img-block"  @click="toUserDetails" @longpress.stop='userMenuPop' >
				<image :src="headPic" 
				mode=""
				class="user-img">
				</image>
			</view>
			<view class="user-status-block">
				<view class="user-status">
					<label class="iconfont icondian"></label>
				</view>
			</view>
			<view class="nav-title">
				联系人
			</view>
			<view class="more" @click="toAddFriend">
				<label class="iconfont icontianjialianxiren"></label>
			</view>
		</view>
	<!-- 	<uni-nav-bar left-icon="back" 
		left-text="返回" right-text="菜单" 
		title="导航栏组件"
		backgroundColor="#007AFF"
		leftIcon=""
		>
		</uni-nav-bar> -->
	</view>
</template>

<script>
	
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	
	export default {
		name: 'Navigation',
		data() {
			return {
				height:null,//获取的状态栏高度
			}
		},
		props:{
			headPic: String
		},
		beforeCreate(){
			var _this=this;
			// 获取手机状态栏高度
			uni.getSystemInfo({
				success:function(data){
					// 将其赋值给this
					_this.height=data.statusBarHeight;
				}
			})
		},
		methods: {
			// 跳转添加好友
			toAddFriend(){
				uni.navigateTo({
					url:'../../pages/contact/searchFriend/searchFriend',
					animationType:"slide-in-bottom",
					animationDuration:400
				})
			},
			userMenuPop() {
				console.log('长按了')
				this.toAccountManagement()
			},
			toAccountManagement() {
				console.log('跳转了')
				uni.navigateTo({
					url:'../../pages/login/account-management/account-management',
					animationType: 'zoom-fade-out',
					animationDuration: 300
				})
			},
			toUserDetails(){
				uni.navigateTo({
					url:'../../pages/user/userDetails/myDetails',
					animationType: 'slide-in-bottom',
					animationDuration: 300
				})
			}
		},
		components: {
			uniNavBar
		}
	}
</script>

<style>
	/* .status_bar {
		background-color: #007AFF;
	} */
	.myNavigation {
		/* background-color: #10d4ff; */
		display: flex;
		flex-direction: row;
	/* 	justify-content: space-between; */
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 0 30rpx;
		z-index: 1;
	}
	.user-img-block {
		flex: 2;
		position: absolute;
		left: 20rpx;
		bottom: 10rpx;
	}
	
	.user-img {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}
	
	.user-status-block {
		position: absolute;
		left: 100rpx;
		bottom: 20rpx;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
	}
	
	.nav-title {
		position: absolute;
		left: 320rpx;
		bottom: 20rpx;
		font-size: 18px;
		color: #FFFFFF;
	}
	
	.icondian {
		font-size: 8px;
		margin-right: 10rpx;
		color: #4CD964;
	}
	
	
	.more {
		position: absolute;
		left: 680rpx;
		bottom: 25rpx;
	}
	
	.icontianjialianxiren {
		font-size: 22px;
		color: #ffffff;
	}
</style>
